<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#div_id_one {
			background-color: green;
			width: 500px;
			height: 500px;
			border: 2px solid #000;
		}

		#div_id_two {
			width: 350px;
			height: 350px;
			background-color: red;

		}

		#div_id_three {
			width: 200px;
			height: 200px;
			background-color: rosybrown;

		}

		#div_id_four {
			width: 70px;
			height: 70px;
			background-color: darkslategray;

		}

		div {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

		}
	</style>
	<body>
		<!-- 4.制作4个嵌套DIV ，要求：
		1.每个父DIV尺寸必须大于子DIV
		2.实现每个DIV在父DIV正中间
		3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		4.通过最底层DIV，打印每层父DIV，如：
		1级父元素为（），1级父节点为（）
		2级父元素为（），2级父节点为（）
		....
		5.查找每个DIV的子元素和子对象 -->

		<div id="div_id_one">
			<span>div_id_one_span</span>
			<div id="div_id_two">
				<p>div_id_one_p</p>
					<button id="b_console_log_children">打印每层子DIV</button>
				<div id="div_id_three">
					<a>div_id_one_a</a>
					<button id="b_console_log_parent">打印每层父DIV</button>
					<div id="div_id_four">
						<img src="img/pic.jpg" style="width: 70px; height: 70px;">
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		function getParent(){
			console.log("S 打印每层父DIV ")
			console.log("1级父元素为")
			console.log(document.getElementById("div_id_four").parentElement);
			console.log("1级父节点为")
			console.log(document.getElementById("div_id_four").parentNode);
			
			console.log("2级父元素为")
			console.log(document.getElementById("div_id_four").parentElement.parentElement);
			console.log("2级父节点为")
			console.log(document.getElementById("div_id_four").parentNode.parentNode);
			
			console.log("3级父元素为")
			console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement);
			console.log("3级父节点为")
			console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode);
			
			console.log("4级父元素为")
			console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement.parentElement);
			console.log("4级父节点为")
			console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode.parentNode);
			
			console.log("5级父元素为")
			console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement.parentElement.parentElement);
			console.log("5级父节点为")
			console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode.parentNode.parentNode);
			
			console.log("6级父元素为")
			console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
			console.log("6级父节点为")
			console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
		
			console.log("E 打印每层父DIV ")
		}
		document.getElementById("b_console_log_parent").onclick=getParent;
		
			function getChildren(){
				console.log("S 打印每层子DIV ")
				console.log("div_id_one级子元素为")
				console.log(document.getElementById("div_id_one").children);
				console.log("div_id_one级子节点为")
				console.log(document.getElementById("div_id_one").childNodes);
				console.log("div_id_two级子元素为")
				console.log(document.getElementById("div_id_two").children);
				console.log("div_id_two级子节点为")
				console.log(document.getElementById("div_id_two").childNodes);
				console.log("div_id_three级子元素为")
				console.log(document.getElementById("div_id_three").children);
				console.log("div_id_three级子节点为")
				console.log(document.getElementById("div_id_three").childNodes);
				console.log("div_id_four级子元素为")
				console.log(document.getElementById("div_id_four").children);
				console.log("div_id_four级子节点为")
				console.log(document.getElementById("div_id_four").childNodes);
				console.log("E 打印每层子DIV ")
			}
			document.getElementById("b_console_log_children").onclick=getChildren;
	</script>
</html>
